// 子组件
<template>
  <ul>
    <li v-for="(item, index) in treeData" :key="index" :class="{'active':!(item.children && item.children.length > 0)}">
      <span class='item'>
        <span class="icon" @click="item.isExpand = !item.isExpand">
          <a-icon v-if="item.children && item.children.length > 0 && !item.isExpand" type="caret-right" />
          <a-icon v-else-if="item.children && item.children.length > 0 && item.isExpand" type="caret-down" />
        </span>
        <span class="title"
          @click="handleClick(item)">{{item.meta.text}}</span>
          <a-tag v-if="item.meta.name" color="blue">{{item.meta.name}}</a-tag>
      </span>
      <!-- 递归组件 -->
      <tree-one v-show="item.isExpand" v-if="item.children && item.children.length > 0" :treeData="item.children"></tree-one>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'TreeOne',
  props: {
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    handleClick(){}
  }
}
</script>